<template>
	<div class='demo mb-3'>
    <div class="card">
      <div class="card-body">
        <slot></slot>
      </div>
    </div>
    <vb-accordion v-model="activeKeys" :data="data">
      <template #code>
        <slot name="demoCode"></slot>
      </template>
    </vb-accordion>
	</div>
</template>
<script lang='ts'>
import {defineComponent, ref, watch} from 'vue';
export default defineComponent({
  name : 'demo',
  props: {
  },
  setup(){
    const data = ref([
      {title: '展开代码',contentSlotName: 'code',key : 1}
    ]);
    const activeKeys = ref([]);
    watch(activeKeys,(v) => {
      if(v.length > 0){
        data.value[0].title = '隐藏代码';
      }else{
        data.value[0].title = '展开代码';
      }
    });
    return {
      data,
      activeKeys
    };
  }
});
</script>
<style>
  .demo .card{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .demo .accordion{
    margin-top: -1px;
  }
  .demo pre{margin-bottom: 0;}
</style>